<script setup lang="ts">
import useUserStore from "@/pinia/modules/user/userStore.ts";
import { storeToRefs } from "pinia";

const useStore = useUserStore();

const { userInfo } = storeToRefs(useStore);
</script>

<template>
  <div class="home">
    <el-card>
      <div class="avatar">
        <img :src="userInfo.avatar" alt="">
      </div>
      <div class="userInfo">
        <h2>您好{{ userInfo.name }}欢迎来到硅谷甄选后台管理系统</h2>
        <el-link type="primary">硅谷甄选运营平台</el-link>
      </div>
    </el-card>
    <img src="../../assets/images/offer.png" alt="">
  </div>
</template>

<style scoped lang="scss">
.home {
  text-align: center;

  :deep( .el-card__body) {

    display: flex;

    .avatar {
      width: 110px;
      height: 110px;
      border-radius: 110px;
      overflow: hidden;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .userInfo {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: start;

      h2 {
        font-size: 25px;
        font-weight: 800;
        color: #001529;
      }

      .el-link__inner {
        font-size: 18px;
        font-weight: 500;
      }
    }
  }

  >img {
    width: 600px;
    margin-top: 20px;
  }
}
</style>
